<template>
    <div class="steps">
        <template v-for="(item, index) in options" :key="index">
            <el-tooltip class="box-item" effect="light">
                <template #content>
                    <div>
                        <slot :item="item"></slot>
                    </div>
                </template>
                <div :class="active == index ? 'active' : active > index ? 'finish' : 'wait'">
                    <div class="circle">
                        <div class="iconfont">{{ active <= index ? index + 1 : '' }} </div>
                        </div>
                        <div ref="dis" style="min-height: 26px;margin-left: 12px;line-height: 26px;">
                            <slot :item="item"></slot>
                        </div>
                    </div>
            </el-tooltip>
            <div class="line"></div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

interface prop {
    options: { dis: string }[],
    active: number
}
defineProps<prop>()

const dis = ref()
let timer: any = 0

onMounted(() => {
    dis.value.forEach((item: any) => {
        if (item.clientHeight > 26) {
            item.style.display = "none"
        }
    })
})
window.addEventListener('resize', () => {
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
        dis.value.forEach((item: any) => {
            if (item.clientHeight > 26) {
                item.style.display = "none"
            } else {
                item.style.display = "block"
            }
        })
    }, 500)
})
</script>

<style scoped>
.steps {
    display: flex;
}

.steps>div:nth-child(2n-1) {
    display: flex
}

.steps :last-child.line {
    display: none;
}

.line {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 0 4%;
    min-width: 60px;
}

.line::after {
    content: "";
    display: block;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}

.active .circle {
    border-color: var(--el-color-primary);
    background-color: var(--el-color-primary);
    color: #fff;
}

.finish .circle .iconfont:after {
    content: "\e7fc";
    color: var(--el-color-primary);
}

.finish .circle {
    border-color: var(--el-color-primary);
}
</style>